<template>
  <div class="shannon-container">
    <div class="content">
      <section class="hero">
        <div class="hero-text">
          <h1>克劳德·香农（Claude Shannon）</h1>
          <p>
            克劳德·香农（Claude Shannon），1916年4月30日出生于美国密歇根州的盖洛德（Gaylord），是美国著名的电气工程家和数学家，被誉为“信息论的创始人”。他的研究不仅奠定了现代信息工程学的基础，而且在密码学、数据压缩和符号化等领域取得了卓越的成果。
          </p>
        </div>
        <img src="@/assets/shannon.jpg" alt="Claude Shannon" class="shannon-image" />
      </section>
      <el-timeline>
        <el-timeline-item
          v-for="(event, index) in timeline"
          :key="index"
          :timestamp="event.year"
          placement="top"
        >
          <el-card>
            <h3>{{ event.title }}</h3>
            <p>{{ event.description }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <div class="achievements">
        <h2>主要成就</h2>
        <ul>
          <li v-for="(achievement, index) in achievements" :key="index">
            <strong>{{ achievement.title }}</strong>: {{ achievement.description }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElTimeline, ElTimelineItem, ElCard } from "element-plus";

const timeline = [
  {
    year: "1916",
    title: "出生",
    description: "克劳德·香农出生于美国密歇根州的盖洛德（Gaylord）。",
  },
  {
    year: "1936",
    title: "大学教育",
    description: "在密歇根大学获得数学和电气工程学士学位。",
  },
  {
    year: "1940",
    title: "硕士与博士学位",
    description: "在麻省理工学院（MIT）获得数学硕士学位和电气工程博士学位。",
  },
  {
    year: "1948",
    title: "信息论的诞生",
    description: "发表《通信的数学理论》，奠定了信息论的基础。",
  },
  {
    year: "1950s",
    title: "后续贡献",
    description: "在密码学、数据压缩和符号化等领域取得重要研究成果。",
  },
  {
    year: "2001",
    title: "逝世",
    description: "克劳德·香农逝世，享年84岁。",
  },
];

const achievements = [
  {
    title: "信息论",
    description: "1948年发表《通信的数学理论》，奠定了信息论的基础。",
  },
  {
    title: "密码学",
    description: "在密码学领域取得重要研究成果，为现代加密技术的发展提供了理论基础。",
  },
  {
    title: "数据压缩",
    description: "研究数据压缩技术，为信息存储和传输的效率提升做出了贡献。",
  },
  {
    title: "符号化",
    description: "在符号化领域取得成果，推动了计算机科学和人工智能的发展。",
  },
  {
    title: "机器人学",
    description: "对机器人学的发展产生了深远影响，促进了自动化技术的进步。",
  },
  {
    title: "人工智能",
    description: "为人工智能领域的发展提供了理论支持，推动了智能系统的研究。",
  },
  {
    title: "无人驾驶飞行器",
    description: "对无人驾驶飞行器的研究，为现代无人机技术的发展奠定了基础。",
  },
];
</script>

<style scoped>
.shannon-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: #f5f5f5f5;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(207, 255, 64, 0.12), rgba(227, 107, 33, 0.1));
  border: 1px solid rgba(255, 182, 64, 0.2);
  margin-bottom: 20px;
  align-items: center;
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.shannon-image {
  width: 150px;
  height: auto;
  border-radius: 50%;
  margin-top: 20px;
  transition: transform 0.3s ease-in-out;
}

.shannon-image:hover {
  transform: scale(1.05);
}

.content {
  text-align: center;
  padding: 0 20px;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

h2 {
  font-size: 20px;
  margin-top: 20px;
  color: #333;
}

h3 {
  font-size: 18px;
  margin-bottom: 5px;
  color: #333;
}

p {
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
}

.el-card {
  margin-bottom: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

.el-card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.el-timeline {
  padding: 0;
}

.el-timeline .el-timeline-item__tail {
  border-left: 2px solid #409eff; /* 自定义时间轴颜色 */
  opacity: 0.5; /* 调整透明度 */
}

.el-timeline .el-timeline-item__dot {
  background-color: #409eff; /* 自定义节点颜色 */
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.el-timeline .el-timeline-item__content {
  margin-left: 20px;
}

.achievements {
  margin-top: 20px;
  text-align: left;
  background: #eef7ff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.achievements h2 {
  margin-bottom: 10px;
}

.achievements ul {
  list-style-type: none;
  padding: 0;
}

.achievements li {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .shannon-container {
    padding: 10px;
  }

  .hero {
    padding: 20px;
  }

  h1 {
    font-size: 20px;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 16px;
  }

  p {
    font-size: 12px;
  }

  .shannon-image {
    width: 100px;
  }
}
</style>